<script setup lang="ts">
import { computed, ref } from 'vue';

import { message } from 'ant-design-vue';

interface Technician {
  id: string;
  name: string;
  avatar?: string;
  gender: 'female' | 'male';
  phone: string;
  email?: string;
  department: string;
  position: string;
  level: '专家' | '中级' | '初级' | '高级';
  status: 'active' | 'inactive' | 'training';
  hireDate: string;
  skills: string[];
  performance: {
    income: number;
    score: number;
    services: number;
  };
  schedule: {
    workDays: string[];
    workTime: string;
  };
  notes?: string;
}

interface Props {
  visible: boolean;
  technicians: Technician[];
}

interface Emits {
  (e: 'update:visible', value: boolean): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 筛选条件
const filters = ref({
  dateRange: null,
  department: '',
  level: '',
});

// 当前激活的标签页
const activeTab = ref('service');

// 服务次数排行表格列
const serviceColumns = [
  {
    title: '排名',
    dataIndex: 'rank',
    key: 'rank',
    width: 80,
  },
  {
    title: '技师姓名',
    dataIndex: 'name',
    key: 'name',
    width: 120,
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    width: 100,
  },
  {
    title: '服务次数',
    dataIndex: 'services',
    key: 'services',
    width: 100,
  },
  {
    title: '平均评分',
    dataIndex: 'score',
    key: 'score',
    width: 100,
  },
];

// 收入排行表格列
const incomeColumns = [
  {
    title: '排名',
    dataIndex: 'rank',
    key: 'rank',
    width: 80,
  },
  {
    title: '技师姓名',
    dataIndex: 'name',
    key: 'name',
    width: 120,
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    width: 100,
  },
  {
    title: '收入(元)',
    dataIndex: 'income',
    key: 'income',
    width: 120,
  },
  {
    title: '服务次数',
    dataIndex: 'services',
    key: 'services',
    width: 100,
  },
];

// 评分排行表格列
const scoreColumns = [
  {
    title: '排名',
    dataIndex: 'rank',
    key: 'rank',
    width: 80,
  },
  {
    title: '技师姓名',
    dataIndex: 'name',
    key: 'name',
    width: 120,
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    width: 100,
  },
  {
    title: '平均评分',
    dataIndex: 'score',
    key: 'score',
    width: 100,
  },
  {
    title: '服务次数',
    dataIndex: 'services',
    key: 'services',
    width: 100,
  },
];

// 计算属性
const filteredTechnicians = computed(() => {
  let filtered = props.technicians;

  // 部门筛选
  if (filters.value.department) {
    filtered = filtered.filter(
      (tech) => tech.department === filters.value.department,
    );
  }

  // 等级筛选
  if (filters.value.level) {
    filtered = filtered.filter((tech) => tech.level === filters.value.level);
  }

  return filtered;
});

// 统计概览
const overview = computed(() => {
  const techs = filteredTechnicians.value;
  const totalTechnicians = techs.length;
  const totalServices = techs.reduce(
    (sum, tech) => sum + tech.performance.services,
    0,
  );
  const totalIncome = techs.reduce(
    (sum, tech) => sum + tech.performance.income,
    0,
  );
  const avgScore =
    totalTechnicians > 0
      ? (
          techs.reduce((sum, tech) => sum + tech.performance.score, 0) /
          totalTechnicians
        ).toFixed(1)
      : '0.0';

  return {
    totalTechnicians,
    totalServices,
    totalIncome,
    avgScore,
  };
});

// 服务次数排行
const serviceRanking = computed(() => {
  return [...filteredTechnicians.value]
    .sort((a, b) => b.performance.services - a.performance.services)
    .slice(0, 10);
});

// 收入排行
const incomeRanking = computed(() => {
  return [...filteredTechnicians.value]
    .sort((a, b) => b.performance.income - a.performance.income)
    .slice(0, 10);
});

// 评分排行
const scoreRanking = computed(() => {
  return [...filteredTechnicians.value]
    .sort((a, b) => b.performance.score - a.performance.score)
    .slice(0, 10);
});

// 方法
const getDepartmentColor = (department: string) => {
  const colorMap: Record<string, string> = {
    按摩部: 'blue',
    美容部: 'pink',
    SPA部: 'purple',
  };
  return colorMap[department] || 'default';
};

const getRankClass = (rank: number) => {
  if (rank === 1) return 'rank-gold';
  if (rank === 2) return 'rank-silver';
  if (rank === 3) return 'rank-bronze';
  return 'rank-normal';
};

const exportPerformance = () => {
  message.success('绩效报表导出成功');
};

const refreshData = () => {
  message.success('数据已刷新');
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<template>
  <a-modal
    :open="visible"
    title="绩效统计"
    width="1200px"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="performance-statistics">
      <!-- 筛选区域 -->
      <div class="filter-section">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item label="统计时间">
              <a-range-picker
                v-model:value="filters.dateRange"
                placeholder="请选择时间范围"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="部门">
              <a-select
                v-model:value="filters.department"
                placeholder="请选择部门"
                allow-clear
              >
                <a-select-option value="按摩部">按摩部</a-select-option>
                <a-select-option value="美容部">美容部</a-select-option>
                <a-select-option value="SPA部">SPA部</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="技能等级">
              <a-select
                v-model:value="filters.level"
                placeholder="请选择等级"
                allow-clear
              >
                <a-select-option value="初级">初级</a-select-option>
                <a-select-option value="中级">中级</a-select-option>
                <a-select-option value="高级">高级</a-select-option>
                <a-select-option value="专家">专家</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="操作">
              <a-space>
                <a-button type="primary" @click="exportPerformance">
                  导出报表
                </a-button>
                <a-button @click="refreshData">刷新数据</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </div>

      <!-- 统计概览 -->
      <div class="statistics-overview">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background: #1890ff">👤</div>
                <div class="stat-info">
                  <div class="stat-value">{{ overview.totalTechnicians }}</div>
                  <div class="stat-label">参与统计技师</div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background: #52c41a">✅</div>
                <div class="stat-info">
                  <div class="stat-value">{{ overview.totalServices }}</div>
                  <div class="stat-label">总服务次数</div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background: #faad14">💰</div>
                <div class="stat-info">
                  <div class="stat-value">{{ overview.totalIncome }}</div>
                  <div class="stat-label">总收入(元)</div>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card class="stat-card">
              <div class="stat-content">
                <div class="stat-icon" style="background: #722ed1">⭐</div>
                <div class="stat-info">
                  <div class="stat-value">{{ overview.avgScore }}</div>
                  <div class="stat-label">平均评分</div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <a-row :gutter="16">
          <a-col :span="12">
            <a-card title="部门绩效对比" :bordered="false">
              <div class="chart-container">
                <div class="chart-placeholder">
                  📊
                  <p>部门绩效柱状图</p>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="技能等级分布" :bordered="false">
              <div class="chart-container">
                <div class="chart-placeholder">
                  🥧
                  <p>技能等级饼图</p>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 绩效排行榜 -->
      <div class="performance-ranking">
        <a-card title="技师绩效排行榜" :bordered="false">
          <a-tabs v-model:active-key="activeTab">
            <a-tab-pane key="service" tab="服务次数排行">
              <a-table
                :columns="serviceColumns"
                :data-source="serviceRanking"
                :pagination="false"
                size="small"
              >
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'rank'">
                    <div class="rank-item">
                      <span
                        class="rank-number"
                        :class="getRankClass(index + 1)"
                        >{{ index + 1 }}</span
                      >
                    </div>
                  </template>
                  <template v-else-if="column.key === 'name'">
                    <div class="technician-info">
                      <a-avatar
                        :src="record.avatar"
                        :alt="record.name"
                        size="small"
                      >
                        {{ record.name.charAt(0) }}
                      </a-avatar>
                      <span>{{ record.name }}</span>
                    </div>
                  </template>
                  <template v-else-if="column.key === 'department'">
                    <a-tag :color="getDepartmentColor(record.department)">
                      {{ record.department }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.key === 'services'">
                    <span class="highlight-value">{{ record.services }}</span>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="income" tab="收入排行">
              <a-table
                :columns="incomeColumns"
                :data-source="incomeRanking"
                :pagination="false"
                size="small"
              >
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'rank'">
                    <div class="rank-item">
                      <span
                        class="rank-number"
                        :class="getRankClass(index + 1)"
                        >{{ index + 1 }}</span
                      >
                    </div>
                  </template>
                  <template v-else-if="column.key === 'name'">
                    <div class="technician-info">
                      <a-avatar
                        :src="record.avatar"
                        :alt="record.name"
                        size="small"
                      >
                        {{ record.name.charAt(0) }}
                      </a-avatar>
                      <span>{{ record.name }}</span>
                    </div>
                  </template>
                  <template v-else-if="column.key === 'department'">
                    <a-tag :color="getDepartmentColor(record.department)">
                      {{ record.department }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.key === 'income'">
                    <span class="highlight-value">¥{{ record.income }}</span>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
            <a-tab-pane key="score" tab="评分排行">
              <a-table
                :columns="scoreColumns"
                :data-source="scoreRanking"
                :pagination="false"
                size="small"
              >
                <template #bodyCell="{ column, record, index }">
                  <template v-if="column.key === 'rank'">
                    <div class="rank-item">
                      <span
                        class="rank-number"
                        :class="getRankClass(index + 1)"
                        >{{ index + 1 }}</span
                      >
                    </div>
                  </template>
                  <template v-else-if="column.key === 'name'">
                    <div class="technician-info">
                      <a-avatar
                        :src="record.avatar"
                        :alt="record.name"
                        size="small"
                      >
                        {{ record.name.charAt(0) }}
                      </a-avatar>
                      <span>{{ record.name }}</span>
                    </div>
                  </template>
                  <template v-else-if="column.key === 'department'">
                    <a-tag :color="getDepartmentColor(record.department)">
                      {{ record.department }}
                    </a-tag>
                  </template>
                  <template v-else-if="column.key === 'score'">
                    <span class="highlight-value">{{ record.score }}</span>
                  </template>
                </template>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </a-card>
      </div>
    </div>
  </a-modal>
</template>

<style scoped>
.performance-statistics {
  max-height: 800px;
  overflow-y: auto;
}

.filter-section {
  padding: 16px;
  margin-bottom: 16px;
  background: #fafafa;
  border-radius: 4px;
}

.statistics-overview {
  margin-bottom: 24px;
}

.stat-card {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.stat-content {
  display: flex;
  gap: 16px;
  align-items: center;
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: white;
  border-radius: 8px;
}

.stat-icon {
  font-size: 24px;
  line-height: 1;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #262626;
}

.stat-label {
  margin-top: 4px;
  font-size: 14px;
  color: #8c8c8c;
}

.charts-section {
  margin-bottom: 24px;
}

.chart-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.chart-placeholder {
  color: #8c8c8c;
  text-align: center;
}

.chart-placeholder {
  margin-bottom: 8px;
  font-size: 48px;
}

.performance-ranking {
  margin-bottom: 16px;
}

.rank-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rank-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  border-radius: 50%;
}

.rank-gold {
  background: #ffd700;
}

.rank-silver {
  background: #c0c0c0;
}

.rank-bronze {
  background: #cd7f32;
}

.rank-normal {
  color: #595959;
  background: #d9d9d9;
}

.technician-info {
  display: flex;
  gap: 8px;
  align-items: center;
}

.highlight-value {
  font-weight: 600;
  color: #1890ff;
}

:deep(.ant-table-thead > tr > th) {
  font-weight: 600;
  background: #fafafa;
}
</style>
